<template>
  <div>
    <div class="content">Vue 2 + ECharts 示例</div>
    <ECharts :options="chartOptions" />
  </div>
</template>

<script>
import ECharts from "@/components/ECharts.vue"; // 引入 ECharts 组件
import { randomNum } from "@/utils/random.js";
export default {
  components: {
    ECharts,
  },
  name: "indexVue",

  data() {
    return {
      chartOptions: {
        title: {
          text: "堆叠柱状图",
        },
        tooltip: {},
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [],
      },
    };
  },

  mounted() {
    this.creatVuex();

    this.getSeries(2, 7, randomNum(20));
  },
  methods: {
    creatVuex() {
      console.log("Vuex  ----->  ", this.$store.state.count);
    },
    getSeries(numSeries, numDataPoints, maxRandomValue) {
      let list = Array.from({ length: numSeries }).map(() => ({
        data: Array.from({ length: numDataPoints }).map(() => Math.floor(Math.random() * maxRandomValue)),
        type: "bar",
        stack: "x",
      }));
      this.chartOptions.series = list;
    },
  },
};
</script>

<style scoped>
.content {
  text-align: left;
}
</style>
